<template>
  <div style="display: inline-block;">
    <h3 style="text-align: center">综合创新指数：</h3>
    <div ref='yibiao' :style="{height:'250px',width:'250px'}"></div>
  </div>
</template>

<script>
  export default {
    props: {
      gauge: {
        type: Number,
      },
    },
    watch: {
      gauge() {
        this.gauges();
      },
    },
    mounted() {
      this.gauges();
    },
    methods: {
      gauges() {
        let option = {
          backgroundColor: "#ffffff",
          color: ["#37A2DA", "#32C5E9", "#67E0E3"],
          series: [{
            type: 'gauge',
            detail: {
              formatter: function (value) {
                return value / 10;
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                width: 30,
                shadowBlur: 0,
                color: [
                  [0.33333, '#67e0e3'],
                  [0.66666, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            axisLabel: {
              formatter: function (value) {
                if (value <= 33) {
                  return '低';
                }
                if (value <= 66 && value > 33) {
                  return '中';
                }
                if (value > 66) {
                  return '高';
                }

              }
            },
            axisTick: {
              show: false
            },
            splitNumber: 2,
            splitLine: {
              show: false
            },
            startAngle: 180,
            endAngle: 0,
            max: 100,
            center: ['50%', '65%'],
            radius: '100%',
            data: [{
              value: this.gauge,
              name: '',
            }]

          }]
        };
        let myCharts = this.$echarts.init(this.$refs.yibiao);
        myCharts.setOption(option);
        // myCharts.resize();
      },
    }
  }
</script>

<style scoped>
</style>
